<template>
  <MChart ref="chart" class="chart" />
</template>

<script>
export default {
  name: 'PieChart'
}
</script>
<script setup>
/**
 *     @desc    客货分析饼图
 *     @author  阳坤
 *
 * **/

import { positionTips } from '@/utils/chartPositionTips'
import { ref, onMounted, toRefs, defineProps, watch, reactive } from 'vue'

const props = defineProps({
  pieChartData: {
    type: Array,
    default: () => [] // 饼图数据
  },
  colorList: {
    type: Array,
    default: () => [] // 饼图颜色
  }
})
const { pieChartData, colorList } = toRefs(props)

onMounted(() => {
  chart.value.init(pieOption)
})
watch(
  () => props.pieChartData,
  (newVal, oldVal) => {
    chart.value.init(pieOption)
  },
  { deep: true }
)

const chart = ref(null)

const pieOption = reactive({
  backgroundColor: 'transparent',
  color: colorList,
  tooltip: {
    trigger: 'item',
    position: positionTips
  },
  legend: {
    show: false
  },
  series: [
    {
      type: 'pie',
      radius: ['100%', '85%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: false, // 鼠标经过图标是否放大
      labelLine: {
        show: false
      },
      data: pieChartData
    },
    {
      type: 'pie',
      radius: ['80%', '78.5%'],
      tooltip: {
        trigger: 'none'
      },
      emphasis: false, // 鼠标经过图标是否放大
      data: [100]
    }
  ]
})
</script>

<style scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
